<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas {
      margin: 50px auto 0;
      display: block;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <canvas id="canvasId" width="400" height="400">
    此浏览器不支持canvas
  </canvas>
</body>

</html>
<script>
  const ctx = document.getElementById("canvasId");
  const gl = ctx.getContext("webgl");

  // 定义顶点着色器源码 gl_Position vec4(1.0, 0.0, 0.0, 1.0) x,y,z, w齐次坐标 （x/w,y/w,z/w）
  const VERTEX_SHADER_SOURCE = `
    attribute vec4 aPosition;
    attribute vec4 aTex;
    varying vec2 vTex;
    void main() {
      // 设置顶点位置
      gl_Position = aPosition;
      vTex = vec2(aTex.x, aTex.y);
    }
  `;

  // 定义片元着色器源码
  const FRAGMENT_SHADER_SOURCE = `
    precision lowp float;
    uniform sampler2D uSampler;
    uniform sampler2D uSampler1;
    varying vec2 vTex;
    // 主函数
    void main() {
      vec4 c1 = texture2D(uSampler, vTex);
      vec4 c2 = texture2D(uSampler1, vTex);

      gl_FragColor = c1 * c2;
    }
  `;

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);
  const aPosition = gl.getAttribLocation(program, "aPosition"); // 获取attribute变量的存储位置
  const aTex = gl.getAttribLocation(program, "aTex"); // 获取attribute变量的存储位置
  const uSampler = gl.getUniformLocation(program, "uSampler"); // 获取attribute变量的存储位置
  const uSampler1 = gl.getUniformLocation(program, "uSampler1"); // 获取attribute变量的存储位置

  // 创建一个Float32Array数组，用于存储顶点坐标
  const points = new Float32Array([
    -0.5, 0.5, 0.0, 1.0,
    -0.5, -0.5, 0.0, 0.0,
    0.5, 0.5, 1.0, 1.0,
    0.5, -0.5, 1.0, 0.0,
  ]);

  const buffer = gl.createBuffer(); // 创建缓冲区对象
  const BYTES = points.BYTES_PER_ELEMENT; // 每个元素占用字节数

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // 绑定缓冲区对象

  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW); // 向缓冲区对象写入数据

  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, BYTES * 4, 0); // 将缓冲区对象分配给attribute变量
  gl.enableVertexAttribArray(aPosition); // 开启attribute变量（激活）

  gl.vertexAttribPointer(aTex, 2, gl.FLOAT, false, BYTES * 4, BYTES * 2); // 将缓冲区对象分配给attribute变量
  gl.enableVertexAttribArray(aTex); // 开启attribute变量（激活）

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); // gl.POINTS绘制点，0表示从第0个点开始绘制，1表示绘制1个点

  function getImage(url, location, index) {
    return new Promise(resolve => {
      const img = new Image();
      img.onload = function () {
        const texture = gl.createTexture(); // 创建纹理对象
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // 对纹理图像进行y轴反转
        gl.activeTexture(gl[`TEXTURE${index}`]); // 激活纹理单元
        gl.bindTexture(gl.TEXTURE_2D, texture); // 绑定纹理对象 
        // 设置纹理放大过滤方式为线性插值
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        // 设置纹理缩小过滤方式为线性插值
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        // 设置纹理的S轴和T轴的环绕方式为CLAMP_TO_EDGE
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img); // 设置纹理图像
  
        gl.uniform1i(location, index); // 将纹理传递给片元着色器
  
        resolve();
      }
  
      img.src = url;
    })
  }

  Promise.all([
    getImage("../assets/border.png", uSampler, 0), 
    getImage("../assets/content.png", uSampler1, 1)
  ]).then(() => {
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); // gl.POINTS绘制点，0表示从第0个点开始绘制，1表示绘制1个点
  })

</script>